<template>
  <div>
    <div class="top-banner">
      <div
        style="
          width: 1200px;
          height: 180px;
          margin: 0 auto;
          align-items: center;
          justify-content: center;
          display: flex;
        "
      >
        <img src="./../../images/xc_l.png" style="width: 300px" />
        <img
          src="./../../images/logo_r.png"
          style="width: 150px; margin: 15px 0px 10px 450px"
        />
      </div>
    </div>
    <div class="main-container">
      <Row class="subject-choose">
        <Col
          span="12"
          class="subject-item"
          :class="choosedSubject == 1 && 'choosed'"
        >
          <div @click="changeSubject(1)">科目一</div>
        </Col>
        <Col
          span="12"
          class="subject-item"
          :class="choosedSubject == 4 && 'choosed'"
        >
          <div @click="changeSubject(4)">科目四</div>
        </Col>
      </Row>
      <Row>
        <Col
          span="6"
          v-for="(item, index) in subList"
          :key="index"
          class="subject-warapper"
        >
          <subject-item
            :bgClass="item.bgClass"
            :subjectName="item.subjectName"
            @click.native="routeTo(item.bgClass)"
          ></subject-item>
        </Col>
      </Row>
    </div>
    <div class="footer">
      <div class="copyright-wrapper">
        <div class="copyright">版权所有 ICP证：粤ICP备19045189</div>
        <div>
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?spm=5176.8087400.631162.108.31fe15c96UGiFY&recordcode=44150202000124"
            style="
              display: inline-block;
              text-decoration: none;
              height: 20px;
              line-height: 20px;
            "
          >
            <img
              style="float: left; width: 20px"
              src="./../../images/police.png"
            />
            <span
              style="
                float: left;
                height: 20px;
                line-height: 20px;
                margin: 0px 0px 0px 5px;
                color: #e6e5e5;
                font-size: 14px;
              "
              >广公网安备44150202000124号</span
            >
          </a>
        </div>
      </div>
    </div>
    <Modal v-model="payModal" width="580" footer-hide>
      <payPage @routeToGoldVip="paidAndRouteTo" v-if="payModal"></payPage>
    </Modal>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from "vuex";
import subjectItem from "./../my-components/subject-item.vue";
import payPage from "./../my-components/pay-page/pay-page";
export default {
  name: "home",
  components: {
    subjectItem,
    payPage,
  },
  data() {
    return {
      payModal: false,
      routeToPage: "",
      subjectList: [
        {
          bgClass: "vip",
          subjectName: "VIP题",
        },

        {
          bgClass: "judge",
          subjectName: "判断题",
        },
        {
          bgClass: "single-choice",
          subjectName: "单选题",
        },
        {
          bgClass: "technique",
          subjectName: "答题技巧",
        },
        {
          bgClass: "simplify",
          subjectName: "精简题",
        },
        {
          bgClass: "normal-exercise",
          subjectName: "常规练习",
        },
        {
          bgClass: "simulate-exercise",
          subjectName: "精简仿真练习",
        },
        {
          bgClass: "simulate-exam",
          subjectName: "仿真考试",
        },
      ],
      subjectList2: [
        // {
        //   bgClass: "free-trial",
        //   subjectName: "免费试学"
        // },
        {
          bgClass: "vip",
          subjectName: "VIP题",
        },
        {
          bgClass: "multi-choice",
          subjectName: "多选题",
        },
        {
          bgClass: "judge",
          subjectName: "判断题",
        },
        {
          bgClass: "single-choice",
          subjectName: "单选题",
        },
        {
          bgClass: "technique",
          subjectName: "答题技巧",
        },
        {
          bgClass: "simplify",
          subjectName: "精简题",
        },
        // {
        //   bgClass: "normal-exercise",
        //   subjectName: "常规练习"
        // },
        {
          bgClass: "simulate-exercise",
          subjectName: "精简仿真练习",
        },
        {
          bgClass: "simulate-exam",
          subjectName: "仿真考试",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      choosedSubject: (state) => state.app.choosedSubject,
      isGoldVip: (state) => state.user.is_goldvip,
      token: (state) => state.user.token,
    }),
    subList: function () {
      if (this.choosedSubject == 1) return this.subjectList;
      else if (this.choosedSubject == 4) return this.subjectList2;
    },
  },
  mounted() {},
  methods: {
    changeSubject(subjectIndex) {
      this.$store.commit("setCurrentSubject", subjectIndex);
    },
    paidAndRouteTo() {
      this.payModal = false;
      this.routeTo(this.routeToPage);
    },
    routeTo(bgClass) {
      debugger;
      this.routeToPage = bgClass;
      if (bgClass === "free-trial") {
        this.$router.push({
          path: "/free-questions",
          query: { choosedSubject: this.choosedSubject },
        });
      } else if (bgClass === "photo-basic") {
        this.$router.push({ path: "/photo-basic-skills" });
      } else if (bgClass === "simulate-exercise") {
        if (this.token && !this.isGoldVip) {
          this.payModal = true;
        } else {
          this.$router.push({
            path: "/simulate-exercise",
            query: { choosedSubject: this.choosedSubject },
          });
        }
      } else if (bgClass === "simulate-exam") {
        debugger;
        if (this.token && !this.isGoldVip) {
          this.payModal = true;
        } else {
          this.$router.push({
            path: "/simulate-exam",
            query: {
              choosedSubject: this.choosedSubject,
              questionType: bgClass,
              questionTypeName: this.subjectName,
            },
          });
        }
      } else if (bgClass === "vip") {
        if (this.token && !this.isGoldVip) {
          this.payModal = true;
        } else {
          this.$router.push({
            path: "/vip",
            query: {
              choosedSubject: this.choosedSubject,
              questionType: bgClass,
              questionTypeName: this.subjectName,
            },
          });
        }
      } else {
        this.$router.push({
          path: "/common-subjects",
          query: {
            choosedSubject: this.choosedSubject,
            questionType: bgClass,
            questionTypeName: this.subjectName,
          },
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.top-banner {
  background-color: #a8b5ef;
}
.subject-choose {
  top: -5px;
  margin: 15px 25px 0;
  font-size: 24px;
  line-height: 50px;
  color: #7088ef;
  border: 1px solid #f5f9ff;
  .choosed {
    background-color: #e5e9fd;
    color: #323233;
  }
  .subject-item {
    cursor: pointer;
  }
}
.subject-warapper {
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  padding-top: 40px;
}
.footer {
  margin-top: 100px;
  min-height: 182px;
  padding: 60px 0 50px;
  background-color: #373d41;
  position: relative;
  .copyright-wrapper {
    position: absolute;
    top: 0;
    bottom: 40px;
    right: 0;
    left: 0;
    margin: auto;
    width: 800px;
    height: 80px;
    .copyright {
      color: #9fa7ad;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
</style>
